<!DOCTYPE html>
<html lang="en">
  <head>
    <title>%VITE_APP_NAME%</title>
    <meta name="description" content="%VITE_APP_DESCRIPTION%" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <meta name="robots" content="index, follow" />
    <meta name="keywords" content="%VITE_APP_KEYWORDS%" />
    <meta property="og:title" content="%VITE_APP_NAME%" />
    <meta property="og:description" content="%VITE_APP_DESCRIPTION%" />
    <meta property="og:url" content="%VITE_APP_URL%" />
    <meta property="og:image" content="%VITE_APP_URL%%VITE_APP_OG_IMAGE%" />
    <meta name="twitter:title" content="%VITE_APP_NAME%" />
    <meta name="twitter:description" content="%VITE_APP_DESCRIPTION%" />
    <meta name="twitter:image" content="%VITE_APP_URL%%VITE_APP_TWITTER_IMAGE%" />
    <meta name="twitter:card" content="summary" />
    <link rel="preconnect" href="%VITE_BASE_URL%" crossorigin />
    <link rel="dns-prefetch" href="%VITE_BASE_URL%" />
    <link rel="shortcut icon" href="/favicon.ico" />
    <link rel="manifest" href="/manifest.json" />
    <link rel="apple-touch-icon" href="/icons/icon-72x72.png" />
    <style id="loading-style">
      html,
      body {
        padding: 0;
        margin: 0;
      }
      #loading-ele {
        width: 100vw;
        height: 100vh;
        background: #181925;
        position: absolute;
        top: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: opacity 0.5s;
      }
      #loading-ele img {
        color: #fff;
      }
    </style>
    <!-- Google tag (gtag.js) -->
    <script defer src="https://www.googletagmanager.com/gtag/js?id=G-B46GPS5CXV"></script>
    <script>
      window.dataLayer = window.dataLayer || []
      function gtag() {
        dataLayer.push(arguments)
      }
      gtag('js', new Date())

      gtag('config', 'G-B46GPS5CXV')
    </script>
    <script type="text/javascript" defer>
      ;(function (c, l, a, r, i, t, y) {
        c[a] =
          c[a] ||
          function () {
            ;(c[a].q = c[a].q || []).push(arguments)
          }
        t = l.createElement(r)
        t.async = 1
        t.src = 'https://www.clarity.ms/tag/' + i
        y = l.getElementsByTagName(r)[0]
        y.parentNode.insertBefore(t, y)
      })(window, document, 'clarity', 'script', 'lj8764pm9k')
    </script>
  </head>
  <body>
    <div id="app"></div>
    <div id="loading-ele">
      <img src="/loading.gif" alt="Loading..." />
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
